/**
 *  学习目标：使用useEffect的第二个参数 使用总结
 * 
 * `useEffect` Hook 看做 `componentDidMount`，`componentDidUpdate` 和 `componentWillUnmount` 这三个函数的组合。
 */
import React, { useEffect, useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    const [msg, setMsg] = useState('Hello React');

    // 1. 传[]
    // 含义：代表挂载后的生命周期钩子函数，等于componentDidMount
    // 作用：💥发请求、获取DOM、开始定时器
    // useEffect(() => {
    //   console.log(' 挂载后只执行一次 ----->  ');
    // }, []);

    // 2. 传[依赖项]
    // 含义：👍代表挂载后的生命周期钩子函数，等于componentDidMount 和componentDidUpdate 两个二合一
    //      类似vue中watch开了immediately
    // 作用：监听数据的变化，可以做缓存
    useEffect(() => {
        console.log('count变化时才触发回调 ----->  ');
    }, [count]);

    // 3. 不传 ❌基本不用
    // 含义：代表挂载后的生命周期钩子函数，等于componentDidMount 和componentDidUpdate 两个二合一
    useEffect(() => {
        console.log(' 任意状态变化都会触发 ----->  ');
    });

    return (
        <div>
            count -- {count}
            msg -- {msg}
            <button onClick={() => setCount(count + 1)}>点我修改title</button>
            <button onClick={() => setMsg(msg + '~')}>点我修改Msg</button>
        </div>
    );
}
